<script setup lang="ts">
import { ContentWrap } from '@/components/ContentWrap'
import { useI18n } from '@/hooks/web/useI18n'
import { inject, onMounted } from 'vue'

import { ECOption } from 'types/echarts'

defineOptions({
  name: 'Menu2'
})

const { t } = useI18n()

let echarts = inject<any>('$echarts')

const chart1 = ref<any>(null)

let echartInit = () => {
  let option: ECOption = {
    series: [
      {
        type: 'pie',
        data: [
          {
            value: 335,
            name: '直接访问'
          },
          {
            value: 234,
            name: '联盟广告'
          },
          {
            value: 1548,
            name: '搜索引擎'
          }
        ]
      }
    ]
  }

  // var myChart = echarts.init(document.getElementById('chart'))
  var myChart = echarts.init(chart1)
  myChart.setOption(option)
}
onMounted(() => {
  echartInit()
})
</script>

<template>
  <ContentWrap :title="t('levelDemo.menu')">
    <!--    <div class="flex items-center"> Menu111: <ElInput v-model="text" class="pl-20px" /> </div>-->
    <div id="chart" ref="chart1" style="height: 400px; width: 600px"></div>
  </ContentWrap>
</template>
